<template>
  <!-- 实现地图控件的加载 -->
  <div id="mouse-position"></div>
  <div id="toggle">
    <!-- 这里使用遍历设置图片,再给每个图片一个点击事件(这里的方法需要传递一个实参) -->
    <img
      id="image"
      v-for="item in lists"
      :key="item.name"
      :src="item.src"
      @click="toggleMap(item.name)"
    />
  </div>
</template>

<script setup>
import { onMounted, getCurrentInstance } from 'vue'
import { useMapgisStore } from '@/stores/mapgis'
//导入图片
import vector from '../../img/vector.png'
import image from '../../img/image.png'
const { getLayerByTitle } = useMapgisStore()
const { proxy } = getCurrentInstance()
//编写地图控件
onMounted(() => {
  const $map = proxy.$map
  //添加缩放控件
  const zoomslider = new ol.control.ZoomSlider()
  $map.addControl(zoomslider)
  //添加鼠标控件
  const mousePositionControl = new ol.control.MousePosition({
    /* 坐标格式 */
    coordinateFormat: ol.coordinate.createStringXY(4),
    projection: 'EPSG:4326',
    /* 坐标信息显示样式类名,默认是'ol-mouse-position' */
    className: 'custom-mouse-position',
    target: document.getElementById('mouse-position'),
    undefinedHTML: '&nbsp',
  })
  $map.addControl(mousePositionControl)
  const fullScreen = new ol.control.FullScreen()
  $map.addControl(fullScreen)
})
const lists = [
  {
    name: 'vector',
    src: vector,
  },
  {
    name: 'image',
    src: image,
  },
]
var gaode_image = new ol.layer.Tile({
  title: '影像',
  source: new ol.source.XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
    wrapX: false,
    crossOrigin: 'Anonymous',
  }),
  // opacity: 0.4
})
const toggleMap = (name) => {
  const $map = proxy.$map
  const layers = $map.getLayers()
//   let image = getLayerByTitle({ map: $map, title: '影像' })
//   let vector = getLayerByTitle({ map: $map, title: '矢量' })
  if (name == 'image') {
    layers.insertAt(1, gaode_image)

    // image.setVisible(true)
    // vector.setVisible(false)
  } else {
    layers.remove(gaode_image)

    // image.setVisible(false)
    // vector.setVisible(true)
  }
}
</script>

<style scoped>
:deep.ol-zoomslider {
  top: 7.5em !important;
}

:deep.ol-zoomslider:hover {
  cursor: pointer;
  background-color: skyblue !important;
}

#mouse-position {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 40px;
  line-height: 40px;
  background-color: skyblue;
  opacity: 0.7;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  z-index: 90;
}

#toggle {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 90;
  display: flex;
  width: 220px;
  height: 100px;
}

#image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  padding: 2px;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  border: 1px solid #fff;
}

#image:hover {
  transform: scale(1.1);
  border-color: red;
}
</style>
